<template>
    <div class="menu_left">
        <div class="myheader_left">
            <div style="display: flex; align-items: center; height: 100%">               
               
                <span style="font-size: 18px; color: #fff;font-weight: bold;">再生资源管理平台</span>
            </div>
        </div>
        <el-menu :default-active="$route.name" class="el-menu-vertical-demo" background-color="#001528" text-color="#fff" active-text-color="#fff">
            <!-- 遍历一级菜单 -->
            <template v-for="route in menulist" :key="route.name">
                <!-- 如果没有子菜单，直接渲染el-menu-item -->
                <el-menu-item class="yijimenu"
                    v-if="!route.children || !route.children.length"
                    :index="route.path"
                    @click="handleMenuItemClick(route)"
                >
                     <component :is="getIconComponentByName(route.meta?.icon)" color="#fff" style="width: 24px;margin-right: 5px;"/>
                    {{ route.meta?.title }}
                </el-menu-item>

                <!-- 如果有子菜单，渲染一个el-sub-menu -->
                <el-sub-menu v-else :index="route.path">
                    <template #title>
                        <component :is="getIconComponentByName(route.meta?.icon)" color="#fff" style="width: 24px;margin-right: 5px;"/>
                        <span>{{ route.meta?.title }}</span>
                    </template>
                    <!-- 遍历渲染出所有子菜单 -->
                    <template v-for="child in route.children" :key="child.name">
                        <el-menu-item
                            v-if="child.meta"
                            :index="child.path"
                            @click="handleMenuItemClick(child)"
                        >
                            {{ child.meta?.title }}
                        </el-menu-item>
                    </template>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import homeChildrenRoutes from "../router/data";
import userdata from "../router/data2";
import { onMounted } from "vue";
import * as Icons from '@element-plus/icons-vue';

const menulist = localStorage.getItem("userType")=='superadmin'?homeChildrenRoutes:userdata;

onMounted(() => {
    console.log(onMounted);
});

const router = useRouter();
const route = useRoute();

const handleMenuItemClick = (route: any) => {
    // 如果这个路由项是一个子路由，我们需要构建完整的路径
    if (route.meta && route.meta.parentPath) {
        router.push({ path: route.meta.parentPath + "/" + route.path });
    } else {
        console.log(route.path);
        // 否则，它就是一个顶级路由，我们可以直接使用它的路径
        router.push({ path: "/" + route.path });
    }
};

const getIconComponentByName = (iconName:any) => {
  // 将字符串“Tickets”转换为组件 `Icons.Tickets`
  return Icons[iconName];
};
</script>

<style lang="scss" scoped>
.menu_left {
    width: 200px;
    height: 100%;
    background-color: #001528;
    z-index: 6;
}

.myheader_left {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
}

.el-menu-vertical-demo {
    width: 200px !important;
    height: calc(100% - 60px);
    overflow-y: auto;
    transition: all 0.5s;
}

.el-menu-vertical-demo::-webkit-scrollbar {
    width: 0 !important;
}

.el-menu-vertical-demo {
    overflow: -moz-scrollbars-none;
    border: none;
}

.miniWitdh {
    width: 70px !important;
    transition: all 0.5s;
}

:deep(.el-menu-item-group__title) {
    display: none;
}

:deep(.el-submenu__title i) {
    color: rgb(165, 172, 179);
}

:deep(.el-submenu__title) {
    color: rgb(165, 172, 179);
}

:deep(.el-submenu) {
    .el-menu-item {
        position: relative;
        // background-color: #161d31 !important;
        padding-left: 55px !important;

        &:hover {
            background-color: #f6f6f6 !important;

            &::after {
                opacity: 1;
            }
        }

        &:after {
            content: "";
            position: absolute;
            right: 0;
            width: 5px;
            background-color: #4f46e5 !important;
            height: 100%;
            opacity: 0;
        }
    }

    .is-active {
        position: relative;
        background-color: rgba(36, 153, 239, 0.06) !important;

        &::after {
            opacity: 1;
        }
    }
}

:deep(.el-submenu__icon-arrow) {
    color: rgb(165, 172, 179) !important;
}

.clearboth:after {
    width: 0 !important;
}

:deep(.is-active .clearcolor .el-submenu__title) {
    color: #fff;
}

:deep(.is-active .is-active .el-submenu__title) {
    color: #fff;
}

:deep(.el-sub-menu .is-active){
    background-color:#409eff;
}
:deep(.yijimenu.is-active){
    background-color:#409eff;
}
</style>